<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>订单查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="https://static.91haoka.cn/vant.css" />
    <script src="https://static.91haoka.cn/vue.min.js"></script>
    <script src="https://static.91haoka.cn/vantall.js"></script>
    <script src="https://static.91haoka.cn/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://static.91haoka.cn/all.css" />
</head>
<style type="text/css">
    * {
        box-sizing: border-box;
        font-family: 'PingFang SC';
        font-size: 14px;
    }

    .images_container {
        display: flex;
        justify-content: center;
    }

    .order_images {
        height: 90px;
        width: 85px;
        margin-top: 80px;
    }

    .phone_over {
        font-size: 14px;
        color: #404247;
        margin-top: 30px;
        font-weight: 400;
    }

    .phone_input {
        background: #F6F8FB;
        height: 45px;
        border: 1px #E3E8F1 solid;
        border-radius: 10px;
        width: 100%;
        margin-top: 10px;
        padding-left: 9.5px;
    }

    input::placeholder {
        color: #D4D7DE;

    }

    .id_container {
        margin-top: 10px;

    }

    .id_input {
        height: 45px;
        line-height: 45px;
        text-align: center;
        width: 45px;
        border: 1px #E3E8F1 solid;
        background: #F6F8FB;
        border-radius: 10px;
    }

    .query_btn {
        background: #005AFF;
        color: white;
        font-size: 15px;
        width: 100%;
        height: 45px;
        border-radius: 10px;
        margin-top: 30px;
    }

    .password-input {
        display: flex;
        justify-content: space-between;
    }
    .van-password-input__security li{
        width: 45px;
        height: 45px;
        border: 1px solid #E3E8F1;
        background: #F6F8FB;
        border-radius: 10px;
        line-height: 45px;
    }
    .van-password-input{
        margin: 0;
    }
</style>

<body>
    <!-- 此页面开发完，页面名称改为chadan.html -->
    <div id="app" style="background: #F6F8FB; min-height: 100vh;padding: 0 25px;overflow: hidden;" v-cloak>
        <div class="images_container">
            <img class="order_images" src="./img/orderQuery.png" alt="">
        </div>
        <div class="phone_contaner">
            <div class="phone_over">收货电话</div>
            <div>
                <input v-model="inputData.mobile" class="phone_input" type="text" placeholder="请输入下单时的填写的收货电话" />
            </div>
        </div>
        <div class="phone_contaner">
            <div class="phone_over">购卡者身份证后6位</div>
            <div class="id_container">
                <van-password-input :length="6" :gutter="10" :value="inputData.idcard" :mask="false"
                    :focused="showKeyboard" @focus="showKeyboard = true" />
            </div>

        </div>
        <van-button class="query_btn" @click="go">查询订单</van-button>
        <van-number-keyboard :show="showKeyboard" extra-key="X" v-model="inputData.idcard"
            @blur="showKeyboard = false" />
    </div>


    <script>
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;


        new Vue({
            el: '#app',
            data: function () {
                return {
                    showKeyboard: false,
                    inputData: {
                        mobile: "",
                        idcard: "",
                    },
                }
            },
            created() {

            },
            mounted() {

            },
            methods: {
                getUrlParam: function (name) {
						var query = window.location.search.substring(1);
						var vars = query.split("&");
						for (var i = 0; i < vars.length; i++) {
							var pair = vars[i].split("=");
							if (pair[0] == name) { return pair[1]; }
						}
						return (false);
					},
                go:function(url){
                    if(!this.inputData.mobile){
                        vant.Toast("请输入手机号码");
                        return 
                    } 
                    if(!this.inputData.idcard|| this.inputData.idcard.length<6){
                        vant.Toast("请输入身份证后6位");
                        return
                    }
					
					let id = ''
					if(this.getUrlParam('id')){
						id = this.getUrlParam('id')
					}
					
                    	window.location.href = `dingdanList.html?mobile=${this.inputData.mobile}&idcard=${this.inputData.idcard}&id=${id}&tab=${this.getUrlParam('tab')}`
                    },
            },
            watch: {
                'inputData.idcard': function (value) {
                    console.log('value',value.length)
                    if (value.length === 6) {
                        this.showKeyboard = false;
                    }
                },
            },
        });


    </script>
</body>

</html>